import { onMountedOrActivated } from '@/utils'
import { onDeactivated, onUnmounted, Ref, unref } from 'vue'
import { isBrowser } from './useClickAway'

export let supportsPassive = false

if (isBrowser) {
	try {
		const opts = {}
		Object.defineProperty(opts, 'passive', {
			get() {
				supportsPassive = true
			}
		})
		window.addEventListener('test-passive', null as any, opts)
		// eslint-disable-next-line no-empty
	} catch (e) {}
}

export type UserEventListenerOptions = {
	target?: EventTarget | Ref<EventTarget | undefined>
	capture?: boolean
	passive?: boolean
}

export function useEventListener(
	type: string,
	listener: EventListener,
	options: UserEventListenerOptions = {}
) {
	if (!isBrowser) return
	const { target = window, passive = false, capture = false } = options
	let attached: boolean

	const add = () => {
		const element = unref(target)
		if (element && !attached) {
			element.addEventListener(
				type,
				listener,
				supportsPassive ? { capture, passive } : capture
			)
			attached = true
		}
	}

	const remove = () => {
		const element = unref(target)
		if (element && attached) {
			element.removeEventListener(type, listener, capture)
			attached = false
		}
	}

	onUnmounted(remove)
	onDeactivated(remove)
	onMountedOrActivated(add)
}
